// iMac 24” (2021)
$device-silver: #EDEEF0;
$device-silver-dark: #D4D5D7;
$device-blue: #EDEEF0;
$device-blue-dark: #B4C7DA;
$device-green: #EDEEF0;
$device-green-dark: #BBD0C8;
$device-pink: #EDEEF0;
$device-pink-dark: #EDCCC6;
$device-yellow: #EDEEF0;
$device-yellow-dark: #F4D595;
$device-orange: #EDEEF0;
$device-orange-dark: #E9B5A0;
$device-purple: #EDEEF0;
$device-purple-dark: #C4C4E5;
$device-panel: #0d0d0d;

.device-imac {
  height: 540px;
  width: 640px;

  .device-frame {
    background: $device-silver;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px $device-silver-dark;
    height: 440px;
    padding: 16px 16px 80px 16px;
    position: relative;
    width: 640px;

    &::after {
      background: $device-silver-dark;
      border-radius: 0 0 18px 18px;
      bottom: 1px;
      box-shadow: inset 0 0 18px 0 darken($device-silver-dark, 5%);
      content: "";
      height: 63px;
      left: 1px;
      position: absolute;
      width: 638px;
    }
    &::before {
      background: darken($device-panel, 3%);
      border-radius: 50%;
      content: "";
      height: 6px;
      left: 50%;
      margin-left: -3px;
      position: absolute;
      text-align: center;
      top: 6px;
      width: 6px;
      z-index: 9;
    }
  }

  // 4480-by-2520-pixel resolution
  .device-screen {
    border: 2px solid lighten($device-panel, 2%);
    border-radius: 2px;
    height: 342px;
    width: 608px;
  }

  .device-power {
    &::after {
      background: radial-gradient(circle at center, $device-silver-dark 85%, darken($device-silver-dark, 20%) 100%);
      border-top: 1px solid $device-silver-dark;
      content: "";
      height: 6px;
      margin: 0 auto;
      position: relative;
      width: 152px;
    }
    &::before {
      background: linear-gradient(to bottom, darken($device-silver-dark, 20%) 0, darken($device-silver-dark, 5%) 40%, darken($device-silver-dark, 5%) 85%, lighten($device-silver, 15%) 90%, darken($device-silver-dark, 40%) 100%);
      content: "";
      height: 92px;
      margin: 0 auto;
      position: relative;
      width: 152px;
    }
  }

  .device-home {
    background: transparent;
    border-radius: 0 0 3px 3px;
    bottom: 0;
    box-shadow: -61px 0 $device-silver-dark, 61px 0 $device-silver-dark;
    height: 2px;
    left: 50%;
    margin-left: -15px;
    position: absolute;
    width: 30px;
  }

  // Blue edition
  &.device-blue {
    .device-frame {
      box-shadow: inset 0 0 0 2px $device-blue-dark;

      &::after {
        background: $device-blue-dark;
        box-shadow: inset 0 0 18px 0 darken($device-blue-dark, 5%);
      }
    }

    .device-power {
      &::after {
        background: radial-gradient(circle at center, $device-blue-dark 85%, darken($device-blue-dark, 20%) 100%);
        border-top-color: $device-blue-dark;
      }
      &::before {
        background: linear-gradient(to bottom, darken($device-blue-dark, 20%) 0, darken($device-blue-dark, 5%) 40%, darken($device-blue-dark, 5%) 85%, lighten($device-blue, 15%) 90%, darken($device-blue-dark, 40%) 100%);
      }
    }

    .device-home {
      box-shadow: -61px 0 $device-blue-dark, 61px 0 $device-blue-dark;
    }
  }

  // Green edition
  &.device-green {
    .device-frame {
      box-shadow: inset 0 0 0 2px $device-green-dark;

      &::after {
        background: $device-green-dark;
        box-shadow: inset 0 0 18px 0 darken($device-green-dark, 5%);
      }
    }

    .device-power {
      &::after {
        background: radial-gradient(circle at center, $device-green-dark 85%, darken($device-green-dark, 20%) 100%);
        border-top-color: $device-green-dark;
      }
      &::before {
        background: linear-gradient(to bottom, darken($device-green-dark, 20%) 0, darken($device-green-dark, 5%) 40%, darken($device-green-dark, 5%) 85%, lighten($device-green, 15%) 90%, darken($device-green-dark, 40%) 100%);
      }
    }

    .device-home {
      box-shadow: -61px 0 $device-green-dark, 61px 0 $device-green-dark;
    }
  }

  // Pink edition
  &.device-pink {
    .device-frame {
      box-shadow: inset 0 0 0 2px $device-pink-dark;

      &::after {
        background: $device-pink-dark;
        box-shadow: inset 0 0 18px 0 darken($device-pink-dark, 5%);
      }
    }

    .device-power {
      &::after {
        background: radial-gradient(circle at center, $device-pink-dark 85%, darken($device-pink-dark, 20%) 100%);
        border-top-color: $device-pink-dark;
      }
      &::before {
        background: linear-gradient(to bottom, darken($device-pink-dark, 20%) 0, darken($device-pink-dark, 5%) 40%, darken($device-pink-dark, 5%) 85%, lighten($device-green, 15%) 90%, darken($device-pink-dark, 40%) 100%);
      }
    }

    .device-home {
      box-shadow: -61px 0 $device-pink-dark, 61px 0 $device-pink-dark;
    }
  }

  // Yello edition
  &.device-yellow {
    .device-frame {
      box-shadow: inset 0 0 0 2px $device-yellow-dark;

      &::after {
        background: $device-yellow-dark;
        box-shadow: inset 0 0 18px 0 darken($device-yellow-dark, 5%);
      }
    }

    .device-power {
      &::after {
        background: radial-gradient(circle at center, $device-yellow-dark 85%, darken($device-yellow-dark, 20%) 100%);
        border-top-color: $device-yellow-dark;
      }
      &::before {
        background: linear-gradient(to bottom, darken($device-yellow-dark, 20%) 0, darken($device-yellow-dark, 5%) 40%, darken($device-yellow-dark, 5%) 85%, lighten($device-green, 15%) 90%, darken($device-yellow-dark, 40%) 100%);
      }
    }

    .device-home {
      box-shadow: -61px 0 $device-yellow-dark, 61px 0 $device-yellow-dark;
    }
  }

  // Orange edition
  &.device-orange {
    .device-frame {
      box-shadow: inset 0 0 0 2px $device-orange-dark;

      &::after {
        background: $device-orange-dark;
        box-shadow: inset 0 0 18px 0 darken($device-orange-dark, 5%);
      }
    }

    .device-power {
      &::after {
        background: radial-gradient(circle at center, $device-orange-dark 85%, darken($device-orange-dark, 20%) 100%);
        border-top-color: $device-orange-dark;
      }
      &::before {
        background: linear-gradient(to bottom, darken($device-orange-dark, 20%) 0, darken($device-orange-dark, 5%) 40%, darken($device-orange-dark, 5%) 85%, lighten($device-green, 15%) 90%, darken($device-orange-dark, 40%) 100%);
      }
    }

    .device-home {
      box-shadow: -61px 0 $device-orange-dark, 61px 0 $device-orange-dark;
    }
  }

  // Purple edition
  &.device-purple {
    .device-frame {
      box-shadow: inset 0 0 0 2px $device-purple-dark;

      &::after {
        background: $device-purple-dark;
        box-shadow: inset 0 0 18px 0 darken($device-purple-dark, 5%);
      }
    }

    .device-power {
      &::after {
        background: radial-gradient(circle at center, $device-purple-dark 85%, darken($device-purple-dark, 20%) 100%);
        border-top-color: $device-purple-dark;
      }
      &::before {
        background: linear-gradient(to bottom, darken($device-purple-dark, 20%) 0, darken($device-purple-dark, 5%) 40%, darken($device-purple-dark, 5%) 85%, lighten($device-green, 15%) 90%, darken($device-purple-dark, 40%) 100%);
      }
    }

    .device-home {
      box-shadow: -61px 0 $device-purple-dark, 61px 0 $device-purple-dark;
    }
  }
}